<template>
  <div>
    <region-select
      v-if="isShowSalonSelect"
      ref="refSalonSelect"
      :mode="2"
      :dept="2"
      :display="'row'"
      @selected="handleSalonSelected"></region-select>
    <div class="filter_page">
      <div class="context">
        <div class="title_1" style="cursor: pointer" @click.stop="handleShowFilterTags">
          标签筛选
          <i v-if="clerkFilter.dataLoading" class="el-icon-loading"></i>
          <i v-else-if="clerkFilter.popMe" class="el-icon-arrow-down"></i>
          <i v-else class="el-icon-arrow-right"></i>
        </div>
        <div v-if="clerkFilter.popMe" class="title_1_ctx2">
          <table style="margin-left: -2px">
            <tr style="vertical-align: top">
              <td>
                <div class="title_2">
                  <div class="title_icon"></div>
                  <div class="title_name">分组标签</div>
                </div>
              </td>
              <td>
                <div class="tag_list">
                  <div v-for="tag in tagsGroupList" class="tag_item">
                    <div class="tag_name">
                      <el-checkbox v-model="tag.checked" @change="onClickTagItem(tag)">{{ tag.tag }}</el-checkbox>
                    </div>
                  </div>
                </div>
              </td>
            </tr>
          </table>
        </div>
      </div>
      <!--已选择的标签-->
      <div v-if="allSelectedTags.length" class="title_1_ctx2" style="padding: 5px 10px 0 0">
        <table style="margin-left: -2px">
          <tr style="vertical-align: top">
            <td>
              <div class="title_2">
                <div style="width: 4px; height: 13px"></div>
                <div class="title_name" style="color: #724eff">已选标签</div>
              </div>
            </td>
            <td>
              <div class="tag_list">
                <div v-for="tag in allSelectedTags" class="tag_item">
                  <div class="tag_name tag_selected">
                    {{ tag.tag }}
                    <i class="el-icon-close" style="cursor: pointer" @click.stop="onSelectRemove(tag)"></i>
                  </div>
                </div>
              </div>
            </td>
          </tr>
        </table>
      </div>
    </div>
    <div
      style="
        margin: 10px 10px 2px 10px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: 5px;
      ">
      <el-button
        class="filter-item"
        style="margin-right: 5px"
        type="primary"
        icon="el-icon-edit"
        size="small"
        @click="handleClerkCreate">
        创建顾客
      </el-button>
      <el-popover placement="bottom" width="300">
        <el-radio-group
          v-model="popover.noble"
          class="no_flex"
          style="display: flex; align-items: center; margin-left: 15px">
          <el-radio :label="0" style="margin: 0px 5px 0px 5px">非重点</el-radio>
          <el-radio :label="2" style="margin: 0px 5px 0px 5px">重点</el-radio>
        </el-radio-group>
        <div style="text-align: right; margin: 0">
          <el-button v-if="isBatchNobleUpdating" size="mini" type="primary" plain disabled icon="el-icon-loading">
            确定
          </el-button>
          <el-button
            v-else
            size="mini"
            type="primary"
            plain
            :disabled="popover.noble === undefined"
            @click.stop="handleBatchUpdateNoble">
            确定
          </el-button>
        </div>
        <el-button slot="reference" type="primary" size="small" :disabled="multipleSelection.length == 0" plain>
          改重点
        </el-button>
      </el-popover>
      <el-popover placement="bottom" width="220">
        <el-radio-group
          v-model="popover.birthdayGiftYeah"
          class="no_flex"
          style="display: flex; align-items: center; margin-left: 15px">
          <el-radio :label="0" style="margin: 0px 5px 0px 5px">未送礼</el-radio>
          <el-radio :label="1" style="margin: 0px 5px 0px 5px">已送礼</el-radio>
        </el-radio-group>
        <div style="text-align: right; margin: 0">
          <el-button v-if="isBatchNobleUpdating" size="mini" type="primary" plain disabled icon="el-icon-loading">
            确定
          </el-button>
          <el-button
            v-else
            size="mini"
            type="primary"
            plain
            :disabled="popover.birthdayGiftYeah === undefined"
            @click.stop="handleBatchUpdateBirthdayGift">
            确定
          </el-button>
        </div>
        <el-button slot="reference" type="primary" size="small" :disabled="multipleSelection.length == 0" plain>
          改送礼
        </el-button>
      </el-popover>
      <el-radio-group
        v-model="clerkFilterType"
        class="no_flex"
        style="display: flex; align-items: center; margin-left: 15px"
        @change="getClerkList">
        <el-radio :label="0" style="margin: 0px 5px 0px 5px">全部</el-radio>
        <el-radio :label="1" style="margin: 0px 5px 0px 5px">时间线更新</el-radio>
        <el-radio v-if="!isCoach" :label="2" style="margin: 0px 5px 0px 5px">只看当日新增顾客</el-radio>
        <el-radio v-else :label="2" style="margin: 0px 5px 0px 5px">新增</el-radio>
        <el-radio v-if="isCoach" :label="3" style="margin: 0px 5px 0px 5px">会诊</el-radio>
      </el-radio-group>
      <el-input
        v-model="search.ccode"
        class="filter-item"
        style="width: 200px; margin-right: 10px"
        placeholder="顾客编号"
        clearable
        size="small"></el-input>
      <el-input
        v-model="search.cname"
        class="filter-item"
        style="width: 160px; margin-right: 10px"
        placeholder="顾客姓名"
        clearable
        size="small"></el-input>
      <el-select
        v-model="search.kid"
        style="width: 160px; margin-right: 10px"
        placeholder="顾客管家"
        clearable
        size="small">
        <el-option v-for="item in listKeeps" :key="item.id" :label="item.nickName" :value="item.id"></el-option>
      </el-select>
      <el-button class="filter-item" type="primary" icon="el-icon-search" size="small" @click="getClerkList">
        查询
      </el-button>
      <el-button class="filter-item" icon="el-icon-refresh" size="small" @click="doClearSearch">重置</el-button>
    </div>
    <div style="margin: 0 10px 2px 10px">
      <el-select
        v-for="sch in searchBarTabs.tabs"
        v-model="search[sch.value]"
        :placeholder="sch.title"
        size="small"
        clearable
        :style="sch.value == 'xqwj' ? 'width: 200px; margin-right: 10px' : 'width: 100px; margin-right: 10px'">
        <el-option v-for="item in sch.options" :label="item.name" :value="item.value"></el-option>
      </el-select>
    </div>

    <el-table
      ref="refClerkTable"
      v-loading="clerkListLoading"
      :data="clerkList"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="45"></el-table-column>
      <el-table-column fixed label="姓名" align="left" width="100" show-overflow-tooltip>
        <template slot-scope="{ row }">
          <div class="clerk_new">
            <el-badge v-if="row.new" value="新"></el-badge>
            {{ row.cname }}
            <i v-if="row.noble === 2" class="el-icon-star-on" style="color: red"></i>
          </div>
        </template>
      </el-table-column>
      <el-table-column fixed label="年龄" align="center" width="55" show-overflow-tooltip>
        <template slot-scope="{ row }">
          <span>{{ getAge(row.solar) }}岁</span>
        </template>
      </el-table-column>
      <el-table-column fixed label="生日" align="left" width="90">
        <template slot-scope="{ row }">
          <el-tag v-if="row.birthdayType === 1" size="mini">公</el-tag>
          <el-tag v-if="row.birthdayType === 2" size="mini" type="info">农</el-tag>
          <img
            v-if="row.birthdayDelay === 0"
            src="@/assets/images/birthday_cake.png"
            alt="happy birthday!"
            style="width: 16px; height: 16px" />
          <el-tag v-if="row.birthdayDelay > 0 && row.birthdayDelay < 15" type="success" size="mini">
            {{ row.birthdayDelay }}
          </el-tag>
          <span>{{ row.birthdayGiftYear | birthdayGiftYearFlt }}</span>
        </template>
      </el-table-column>
      <el-table-column fixed label="性格" align="center" width="90" show-overflow-tooltip>
        <template slot-scope="{ row }">
          <el-popover placement="right" width="300" @show="loadPersonality(row.id)">
            <div class="tag_personality">
              <img src="@/assets/images/jgsj-4.png" width="12" height="12" />
              <span style="margin: 0 12px 0 4px; font-size: 12px; color: #999999">性格标签</span>
              <span v-for="item in tagXg20">
                <el-tag
                  v-if="item && item.startsWith('【')"
                  type="success"
                  plain
                  size="mini"
                  style="padding: 1px 2px; margin: 0 2px">
                  {{ item }}
                </el-tag>
                <el-tag v-else type="warning" plain size="mini" style="padding: 1px 2px; margin: 0 2px">
                  {{ item }}
                </el-tag>
              </span>
              <span v-for="item in tagXgOther">
                <el-tag
                  v-if="item && item.startsWith('【')"
                  type="success"
                  plain
                  size="mini"
                  style="padding: 1px 2px; margin: 0 2px">
                  {{ item }}
                </el-tag>
                <el-tag v-else type="primary" plain size="mini" style="padding: 1px 2px; margin: 0 2px">
                  {{ item }}
                </el-tag>
              </span>
            </div>
            <el-button slot="reference" type="primary" size="mini" plain style="padding: 3px 6px; margin: 0 0 0 8px">
              签
            </el-button>
          </el-popover>
          <span>{{ row.characters }}型</span>
        </template>
      </el-table-column>
      <el-table-column prop="sex" label="性别" align="center" width="50">
        <template slot-scope="{ row }">
          <div v-if="row.sex === 2">其他</div>
          <div v-if="row.sex === 1">女</div>
          <div v-if="row.sex === 0">男</div>
        </template>
      </el-table-column>
      <el-table-column label="运营" align="center" width="100">
        <template slot-scope="{ row }">
          <span v-if="row.dengji === 3">放弃</span>
          <span v-if="row.dengji === 2" style="color: #f56c6c">失速</span>
          <span v-if="row.dengji === 1" style="color: #e6a23c">预警</span>
          <span v-if="row.dengji === 0" style="color: #67c23a">正常</span>
          <el-popover placement="top" width="300">
            <p>
              修改顾客
              <span style="color: #409eff; font-weight: bold">{{ row.cname }}</span>
              的运营状态
            </p>
            <el-radio-group
              v-model="popover.dengji"
              class="no_flex"
              style="display: flex; align-items: center; margin-left: 15px">
              <el-radio :label="0" style="margin: 0px 5px 0px 5px">正常</el-radio>
              <el-radio :label="1" style="margin: 0px 5px 0px 5px">预警</el-radio>
              <el-radio :label="2" style="margin: 0px 5px 0px 5px">失速</el-radio>
              <el-radio :label="3" style="margin: 0px 5px 0px 5px">放弃</el-radio>
            </el-radio-group>
            <div style="text-align: right; margin: 0">
              <el-button v-if="popover.isUpdating" size="mini" type="primary" plain disabled icon="el-icon-loading">
                确定
              </el-button>
              <el-button v-else size="mini" type="primary" plain @click.stop="handlePopoverUpdate(row, 'dengji')">
                确定
              </el-button>
            </div>
            <el-button slot="reference" type="warning" size="mini" plain style="padding: 3px 6px; margin: 0 0 0 8px">
              改
            </el-button>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="需求" align="right" width="75">
        <template slot-scope="{ row }">
          <span v-if="row.demandLevel === 3">大</span>
          <span v-if="row.demandLevel === 2" style="color: #f56c6c">中</span>
          <span v-if="row.demandLevel === 1" style="color: #e6a23c">小</span>
          <span v-if="row.demandLevel === 0" style="color: #67c23a">?</span>
          <el-popover placement="top" width="300">
            <p>
              修改顾客
              <span style="color: #409eff; font-weight: bold">{{ row.cname }}</span>
              的需求大小
            </p>
            <el-radio-group
              v-model="popover.demandLevel"
              class="no_flex"
              style="display: flex; align-items: center; margin-left: 15px">
              <el-radio :label="0" style="margin: 0px 5px 0px 5px">未知</el-radio>
              <el-radio :label="1" style="margin: 0px 5px 0px 5px">小</el-radio>
              <el-radio :label="2" style="margin: 0px 5px 0px 5px">中</el-radio>
              <el-radio :label="3" style="margin: 0px 5px 0px 5px">大</el-radio>
            </el-radio-group>
            <div style="text-align: right; margin: 0">
              <el-button v-if="popover.isUpdating" size="mini" type="primary" plain disabled icon="el-icon-loading">
                确定
              </el-button>
              <el-button v-else size="mini" type="primary" plain @click.stop="handlePopoverUpdate(row, 'demandLevel')">
                确定
              </el-button>
            </div>
            <el-button slot="reference" type="warning" size="mini" plain style="padding: 3px 6px; margin: 0 0 0 8px">
              改
            </el-button>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="当前品类" align="center" width="100">
        <template slot-scope="{ row }">
          <el-tag v-if="row.mdfDqpp" type="success" size="mini">{{ row.mdfDqpp }}</el-tag>
          <el-popover
            :ref="`popover-dqpp-${row.id}`"
            placement="right"
            width="400"
            trigger="click"
            @show="loadClerkTagDqpp(row.id)">
            <i v-if="popDqpp.isFetching" class="el-icon-loading"></i>
            <div v-else>
              <div v-for="tag in popDqpp.tagsClerk">
                <div>
                  <el-checkbox v-model="tag.checked">{{ tag.tag }}</el-checkbox>
                </div>
              </div>
            </div>
            <div style="text-align: right; margin: 0">
              <el-button
                v-if="popDqpp.isUpdating || popDqpp.isFetching"
                size="mini"
                type="primary"
                plain
                disabled
                icon="el-icon-loading">
                确定
              </el-button>
              <el-button v-else size="mini" type="primary" plain @click.stop="updateClerkTagDqpp(row.id)">
                确定
              </el-button>
            </div>
            <el-button slot="reference" type="warning" size="mini" plain style="padding: 3px 6px">改</el-button>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="升单品类" align="center" width="100">
        <template slot-scope="{ row }">
          <el-tag v-if="row.mdfXqwj" type="success" size="mini">{{ row.mdfXqwj }}</el-tag>
          <el-popover
            :ref="`popover-xqwj-${row.id}`"
            placement="right"
            width="400"
            trigger="click"
            @show="loadClerkTagXqwj(row.id)">
            <i v-if="popXqwj.isFetching" class="el-icon-loading"></i>
            <div v-else>
              <div v-for="tag in popXqwj.tagsClerk">
                <div>
                  <el-checkbox v-model="tag.checked">{{ tag.tag }}</el-checkbox>
                </div>
              </div>
            </div>
            <div style="text-align: right; margin: 0">
              <el-button
                v-if="popXqwj.isUpdating || popXqwj.isFetching"
                size="mini"
                type="primary"
                plain
                disabled
                icon="el-icon-loading">
                确定
              </el-button>
              <el-button v-else size="mini" type="primary" plain @click.stop="updateClerkTagXqwj(row.id)">
                确定
              </el-button>
            </div>
            <el-button slot="reference" type="warning" size="mini" plain style="padding: 3px 6px">改</el-button>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="信任等级" align="center" width="100">
        <template slot-scope="{ row }">
          <span v-if="row.trust2 === 3" style="color: #67c23a">已信任</span>
          <span v-if="row.trust2 === 2" style="color: #409eff">已破冰</span>
          <span v-if="row.trust2 === 1" style="color: #e6a23c">未破冰</span>
          <span v-if="row.trust2 === 0">未设置</span>
          <el-popover placement="top" width="300">
            <p>
              修改顾客
              <span style="color: #409eff; font-weight: bold">{{ row.cname }}</span>
              的信任等级
            </p>
            <el-radio-group
              v-model="popover.trust2"
              class="no_flex"
              style="display: flex; align-items: center; margin-left: 15px">
              <el-radio :label="1" style="margin: 0px 5px 0px 5px">未破冰</el-radio>
              <el-radio :label="2" style="margin: 0px 5px 0px 5px">已破冰</el-radio>
              <el-radio :label="3" style="margin: 0px 5px 0px 5px">已信任</el-radio>
            </el-radio-group>
            <div style="text-align: right; margin: 0">
              <el-button v-if="popover.isUpdating" size="mini" type="primary" plain disabled icon="el-icon-loading">
                确定
              </el-button>
              <el-button v-else size="mini" type="primary" plain @click.stop="handlePopoverUpdate(row, 'trust2')">
                确定
              </el-button>
            </div>
            <el-button slot="reference" type="warning" size="mini" plain style="padding: 3px 6px; margin: 0 0 0 8px">
              改
            </el-button>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="消费能力" align="right" width="100">
        <template slot-scope="{ row }">
          <span v-if="row.bg2 === 3">没钱</span>
          <span v-if="row.bg2 === 2" style="color: #f56c6c">普通</span>
          <span v-if="row.bg2 === 1" style="color: #e6a23c">有钱</span>
          <span v-if="row.bg2 === 0" style="color: #67c23a">超有钱</span>
          <el-popover placement="top" width="300">
            <p>
              修改顾客
              <span style="color: #409eff; font-weight: bold">{{ row.cname }}</span>
              的消费能力
            </p>
            <el-radio-group
              v-model="popover.bg2"
              class="no_flex"
              style="display: flex; align-items: center; margin-left: 15px">
              <el-radio :label="0" style="margin: 0px 5px 0px 5px">超有钱</el-radio>
              <el-radio :label="1" style="margin: 0px 5px 0px 5px">有钱</el-radio>
              <el-radio :label="2" style="margin: 0px 5px 0px 5px">普通</el-radio>
              <el-radio :label="3" style="margin: 0px 5px 0px 5px">没钱</el-radio>
            </el-radio-group>
            <div style="text-align: right; margin: 0">
              <el-button v-if="popover.isUpdating" size="mini" type="primary" plain disabled icon="el-icon-loading">
                确定
              </el-button>
              <el-button v-else size="mini" type="primary" plain @click.stop="handlePopoverUpdate(row, 'bg2')">
                确定
              </el-button>
            </div>
            <el-button slot="reference" type="warning" size="mini" plain style="padding: 3px 6px; margin: 0 0 0 8px">
              改
            </el-button>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="消费等级" align="center" width="80">
        <template slot-scope="{ row }">
          <div v-if="row.grade === 4">S级</div>
          <div v-if="row.grade === 3">A级</div>
          <div v-if="row.grade === 2">B级</div>
          <div v-if="row.grade === 1">C级</div>
          <div v-if="row.grade === 0">未定</div>
        </template>
      </el-table-column>
      <el-table-column prop="kname" label="所属管家" align="center" width="120"></el-table-column>
      <el-table-column prop="createTime" label="创建时间" align="center" width="120" show-overflow-tooltip>
        <template slot-scope="{ row }">
          {{ row.createTime ? row.createTime.substring(0, 10) : '' }}
        </template>
      </el-table-column>
      <el-table-column prop="solar" label="出生日期" align="center" width="130"></el-table-column>
      <el-table-column prop="ccode" label="编号" align="center" width="180"></el-table-column>
      <el-table-column prop="sname" label="所属门店" align="center" width="200" show-overflow-tooltip></el-table-column>
      <el-table-column label="操作" fixed="right" align="center" width="500">
        <template slot-scope="{ row }">
          <el-link
            type="success"
            style="margin-right: 5px"
            @click.stop.native="beforeOpenZiXunDan(row.id, 1, 'c' + row.id + '.pdf')">
            参考单
          </el-link>
          <el-link
            type="primary"
            style="margin-right: 5px"
            @click.stop.native="beforeOpenZiXunDan(row.id, 2, 'g' + row.id + '.pdf')">
            顾客单
          </el-link>
          <el-button class="clerk_replay" type="info" size="mini" plain @click="goShowClerkRecords(row.id, row.coachOrderId)">
            <el-badge v-if="row.rmk == 1" is-dot>
              <span>复盘</span>
            </el-badge>
            <span v-else>复盘</span>
          </el-button>
          <el-button size="mini" plain :disabled="popQuan.isFetching" @click.stop="goShowActList(row.id)">
            私域
          </el-button>
          <el-button type="warning" size="mini" plain @click="goShowClerkBills(row.id)">成交</el-button>
          <!-- <el-button
            class="clerk_replay"
            type="primary"
            size="mini"
            plain
            @click="goShowCoachOrder(row.id, row.coachOrderId)">
            <el-badge v-if="row.coachOrderId > 0" is-dot>
              <span>会诊</span>
            </el-badge>
            <span v-else>会诊</span>
          </el-button> -->
          <el-button type="warning" size="mini" plain @click="goShowClerkHenji(row.id)">痕迹</el-button>
          <el-button type="primary" size="mini" plain @click="handleClerkUpdate(row)">编辑</el-button>
          <el-button type="danger" size="mini" plain @click="doClerkDelete(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getClerkList"></pagination>

    <el-drawer :visible.sync="showDialogTags" :with-header="false" :destroy-on-close="true" direction="ltr" size="31%">
      <clerk-tags ref="refClerkTags" @close="handleCloseClerkTags"></clerk-tags>
    </el-drawer>
    <el-drawer :visible.sync="showDialogReplay" :with-header="false" direction="rtl" size="30%">
      <clerk-time-line ref="refClerkTimeLine"></clerk-time-line>
    </el-drawer>
    <el-drawer :visible.sync="showDialogClerkBill" :with-header="false" direction="rtl" size="30%">
      <clerk-bill ref="refClerkBill"></clerk-bill>
    </el-drawer>
    <el-drawer :visible.sync="showDialogOrders" :with-header="false" direction="rtl" size="30%">
      <clerk-order ref="refClerkOrder"></clerk-order>
    </el-drawer>
    <el-drawer :visible.sync="showDialogHenji" :with-header="false" direction="rtl" size="30%">
      <clerk-henji ref="refClerkHenji" @closed="() => (showDialogHenji = false)"></clerk-henji>
    </el-drawer>

    <el-dialog title="适合顾客参加的活动" :visible.sync="popQuan.showMe" width="60%">
      <el-table :data="popQuan.quanList">
        <el-table-column fixed label="类型" align="center" width="80">
          <template slot-scope="{ row }">
            <div v-if="row.scheme === 1" style="color: #724eff">沙龙</div>
            <div v-if="row.scheme === 2" style="color: #f29339">客情</div>
            <div v-if="row.scheme === 3" style="color: #469b78">生日</div>
          </template>
        </el-table-column>
        <el-table-column prop="brief" label="简介" align="center" width="520" show-overflow-tooltip></el-table-column>
        <el-table-column prop="createDate" label="创建时间" align="center" width="120">
          <template slot-scope="{ row }">
            {{ row.createDate ? row.createDate.substring(0, 10) : '' }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center" width="90">
          <template slot-scope="{ row }">
            <el-button type="info" size="mini" plain :disabled="!row.proposal" @click.stop="handleShowProposal(row)">
              查看方案
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import * as apiSts from '@/api/_com_';
// 引入后端 API
import * as actApi from '@/api/activity';
import { getKeepsBySid } from '@/api/admin';
import { updateClerkTagV1 } from '@/api/clerk';
import { checkoutQuanByClerk } from '@/api/quanan';
import { getPersonality } from '@/api/tags';
import * as ctgApi from '@/api/tags_clerk';
import * as tgpApi from '@/api/tags_group';
import {
  applyNobleById,
  batchUpdateBirthdayGift,
  batchUpdateNoble,
  delClerk,
  existZiXunDanAndCreate,
  getClerkPageBySalonId,
} from '@/api/txs';
// 引入自定义组件
import WebConst from '@/utils/const/web-const';
import Pagination from '@/components/Pagination';
import { isAdminRole, isCoachRole } from '@/utils/enum/roles';
import TagGategory from '@/utils/enum/tag-gategorys';
import RegionSelect from '@/views/salon/RegionSelect.vue';
import ClerkBill from './clerks/ClerkBill.vue';
import ClerkHenji from './clerks/ClerkHenji.vue';
import ClerkTags from './clerks/ClerkTags.vue';
import ClerkOrder from './clerks/OrderList.vue';
import ClerkTimeLine from './clerks/TimeLine.vue';
// 引入第三方组件
import dayjs from 'dayjs';
import { Loading, MessageBox } from 'element-ui';
import { mapGetters } from 'vuex';

const SearchBarTabs = [
  {
    title: '消费等级',
    value: 'grade',
    options: [
      { name: '未定', value: 0 },
      { name: 'C级', value: 1 },
      { name: 'B级', value: 2 },
      { name: 'A级', value: 3 },
      { name: 'S级', value: 4 },
    ],
  },
  {
    title: '信任状态',
    value: 'trust2',
    options: [
      { name: '未破冰', value: 1 },
      { name: '已破冰', value: 2 },
      { name: '已信任', value: 3 },
    ],
  },
  {
    title: '运营状态',
    value: 'dengji',
    options: [
      { name: '正常', value: 0 },
      { name: '预警', value: 1 },
      { name: '失速', value: 2 },
      { name: '放弃', value: 3 },
    ],
  },
  {
    title: '消费能力',
    value: 'bg2',
    options: [
      { name: '超有钱', value: 0 },
      { name: '有钱', value: 1 },
      { name: '普通', value: 2 },
      { name: '没钱', value: 3 },
    ],
  },
  {
    title: '需求大小',
    value: 'demandLevel',
    options: [
      { name: '未设置', value: 0 },
      { name: '小', value: 1 },
      { name: '中', value: 2 },
      { name: '大', value: 3 },
    ],
  },
  {
    title: '重点',
    value: 'noble',
    options: [
      { name: '非重点', value: 0 },
      { name: '重点', value: 2 },
    ],
  },
  {
    title: '年龄',
    value: 'age',
    options: [
      { name: '20岁以下', value: 1 },
      { name: '20-30岁', value: 2 },
      { name: '30-40岁', value: 3 },
      { name: '40-50岁', value: 4 },
      { name: '50-60岁', value: 5 },
      { name: '60岁以上', value: 6 },
    ],
  },
  {
    title: '升单品类',
    value: 'xqwj',
    options: [
      { name: '放松（生美）', value: 1 },
      { name: '肤质', value: 2 },
      { name: '肤色', value: 3 },
      { name: '抗衰（肤龄）', value: 4 },
      { name: '塑形-面线条', value: 5 },
      { name: '塑形-面体积', value: 6 },
      { name: '塑形-身体', value: 7 },
      { name: '单部位（鼻、眼、耳、唇、眉、颧、下巴）', value: 8 },
      { name: '私密', value: 9 },
      { name: '胸', value: 10 },
      { name: '大健康', value: 11 },
    ],
  },
  {
    title: '生日查询',
    value: 'birthdayDelay',
    options: [
      { name: '今天', value: 1 },
      { name: '3天内', value: 3 },
      { name: '5天内', value: 5 },
      { name: '7天内', value: 7 },
      { name: '15天内', value: 15 },
    ],
  },
];

const UserNothing = [4, 6, 10, 13, 19, 22, 28, 31, 36, 38];

export default {
  name: 'BranchClerkList',
  components: {
    Pagination,
    'clerk-time-line': ClerkTimeLine,
    'clerk-bill': ClerkBill,
    'clerk-order': ClerkOrder,
    'clerk-tags': ClerkTags,
    'clerk-henji': ClerkHenji,
    ['region-select']: RegionSelect,
  },
  filters: {
    birthdayGiftYearFlt(val) {
      return new Date().getFullYear() == val ? '✔️' : '';
    },
  },
  data() {
    return {
      salon: {},
      clerkFilterType: 0, // 顾客筛选
      listKeeps: [], // 管家列表
      search: {
        cname: '',
        ccode: '',
        kid: '',
        grade: undefined,
        trust2: undefined,
        dengji: undefined,
        bg2: undefined,
        demandLevel: undefined,
        noble: undefined,
        age: undefined,
        xqwj: undefined,
        birthdayDelay: undefined,
      },
      searchBarTabs: {
        tabs: SearchBarTabs,
        tabNameAll: '__all__',
        activeTab: '__all__',
        subOptions: [],
        subSelected: undefined,
      },
      multipleSelection: [],
      isBatchNobleUpdating: false,
      clerk: {},
      total: 0,
      listQuery: {
        page: 1,
        limit: 12,
      },
      tagXg20: [],
      tagXgOther: [],
      tagsGroupList: [], // 标签分组列表 {id:'gp_1', groupName:'', tags:['',''], checked:false, isGroup:true}
      allSelectedTags: [], // {id:xxx} 用 id 属性判断标签是否被选中; 包含 radio 选择
      clerkFilter: {
        // 顾客标签筛选区域
        popMe: false,
        dataLoading: false,
      },
      showDialogTags: false,
      showDialogHenji: false,
      showDialogReplay: false,
      showDialogClerkBill: false,
      showDialogOrders: false,
      clerkList: null, // 顾客列表
      clerkListLoading: false,
      popover: {
        isUpdating: false,
        noble: undefined,
        trust2: undefined,
        dengji: undefined,
        demandLevel: undefined,
        bg2: undefined,
        birthdayGiftYeah: undefined,
      },
      popXqwj: {
        cid: undefined,
        isFetching: false,
        isUpdating: false,
        tagsDef: [],
        tagsClerk: [], // 列表中顾客的升单品类标签
      },
      popDqpp: {
        cid: undefined,
        isFetching: false,
        isUpdating: false,
        tagsDef: [],
        tagsClerk: [], // 列表中顾客的当前品类标签
      },
      popQuan: {
        showMe: false,
        cid: undefined,
        isFetching: false,
        quanList: [],
      },
    };
  },
  computed: {
    ...mapGetters(['name', 'id', 'deptId', 'openId']),
    isShowSalonSelect() {
      return isAdminRole(this.deptId) || isCoachRole(this.deptId);
    },
    isCoach() {
      return isCoachRole(this.deptId);
    },
  },
  created() {
    // 加载标签定义(主要是加载 升单品类)
    this.loadTagDefinations();
    this.loadTagGroups();
  },
  mounted() {
    if (!this.isShowSalonSelect) {
      this.salon.salonId = this.openId;
      this.loadKeepers();
      this.getClerkList();
    }
  },
  methods: {
    handleSalonSelected: async function (salon) {
      if (salon) {
        this.salon.salonId = salon.salonId;
        this.salon.salonNo = salon.salonCode;
        this.salon.salonName = salon.salonName;
        this.loadKeepers();
        this.getClerkList();
      }
    },
    handleShowFilterTags() {
      if (this.clerkFilter.dataLoading) {
        return;
      }
      this.clerkFilter.popMe = !this.clerkFilter.popMe;
    },
    getAge(bd) {
      if (bd) {
        const birthday = dayjs(bd.replace('年', '-').replace('月', '-').replace('日', ''));
        const now = dayjs();
        return now.diff(birthday, 'year');
      }
      return 0;
    },
    goShowActList: async function (cid) {
      // 查询该顾客符合的、已上架的全案
      if (this.popQuan.isFetching) {
        return;
      }
      this.popQuan.isFetching = true;
      this.popQuan.cid = cid;
      this.popQuan.quanList.splice(0, this.popQuan.quanList.length);
      const errAlertMsg = '查询顾客符合活动出错';
      await checkoutQuanByClerk(cid)
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            if (res.data.message) {
              MessageBox.alert(res.data.message);
            } else {
              MessageBox.alert(errAlertMsg);
            }
            return;
          }
          const ret = res.data.data;
          if (!ret || ret.length == 0) {
            MessageBox.alert('没有符合的活动');
            return;
          }
          this.popQuan.quanList.push(...ret);
          this.popQuan.showMe = true;
        })
        .catch(err => {
          console.error(err);
          MessageBox.alert(errAlertMsg);
        })
        .finally(() => (this.popQuan.isFetching = false));
    },
    goShowClerkHenji: async function (cid) {
      this.showDialogHenji = true;
      await this.$nextTick();
      this.$refs.refClerkHenji.getConsumerFangan(cid);
    },
    goShowClerkBills: async function (cid) {
      this.showDialogClerkBill = true;
      await this.$nextTick();
      this.$refs.refClerkBill.loadBillList(cid);
    },
    goShowCoachOrder: async function (cid, rid) {
      this.showDialogOrders = true;
      await this.$nextTick();
      this.$refs.refClerkOrder.loadOrderList(cid, rid);
    },
    goShowClerkRecords: async function (cid, rid) {
      this.showDialogReplay = true;
      await this.$nextTick();
      this.$refs.refClerkTimeLine.loadClerkRecords(cid, rid);
    },
    beforeOpenZiXunDan(id, val, filename) {
      const loading1 = Loading.service({ fullscreen: true, text: '处理中...' });
      existZiXunDanAndCreate(id, val)
        .then(res => {
          const exist = res.data.data;
          if (exist == 1) {
            window.open(WebConst.getClerkPdfUri(filename));
            return;
          }
          MessageBox.alert('生成咨询单失败, 可能图片丢失了');
        })
        .finally(() => {
          loading1.close();
        });
    },
    loadPersonality: async function (cid) {
      const errAlertMsg = '查询标签失败';
      this.tagXg20.splice(0, this.tagXg20.length);
      this.tagXgOther.splice(0, this.tagXgOther.length);
      await getPersonality(cid)
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            if (res.data.message) {
              MessageBox.alert(res.data.message);
            } else {
              MessageBox.alert(errAlertMsg);
            }
            return;
          }
          const ret = res.data.data;
          if (ret && ret.length) {
            ret.every(x => {
              if (UserNothing.includes(x.id)) {
                if (x.tagDesc && x.tagDesc.length) {
                  x.tagDesc.forEach(y => {
                    if (!this.tagXg20.includes(y)) {
                      this.tagXg20.push(y);
                    }
                  });
                }
              } else {
                if (x.tagDesc && x.tagDesc.length) {
                  x.tagDesc.forEach(y => {
                    if (!this.tagXgOther.includes(y)) {
                      this.tagXgOther.push(y);
                    }
                  });
                }
              }
              return true;
            });
          }
        })
        .catch(err => {
          console.error(err);
          MessageBox.alert(errAlertMsg);
        });
    },
    getClerkList() {
      if (this.clerkListLoading) {
        return;
      }
      this.clerkListLoading = true;
      // 所有已选择的标签的 name
      const selectTagNames = [];
      for (const tag of this.tagsGroupList) {
        if (tag.checked) {
          if (tag.tags && tag.tags.length > 0) {
            // 标签分组包含的所有标签
            tag.tags.forEach(x => {
              if (!selectTagNames.includes(x)) {
                selectTagNames.push(x);
              }
            });
          }
        }
      }
      const params = {
        pageNumber: this.listQuery.page,
        pageSize: this.listQuery.limit,
        role: this.deptId,
        sid: this.salon.salonId,
        kid: null,
        cname: null,
        ccode: null,
        rmk: null,
        newOnly: null,
      };
      if (selectTagNames.length) {
        params.tags = selectTagNames.join(',');
      }
      if (this.search.cname) {
        params.cname = this.search.cname;
      }
      if (this.search.ccode) {
        params.ccode = this.search.ccode;
      }
      if (this.search.kid) {
        params.kid = this.search.kid;
      }
      if (this.clerkFilterType === 1) {
        params.rmk = 1;
      } else if (this.clerkFilterType === 2) {
        params.newOnly = 1;
      } else if (this.clerkFilterType === 3) {
        params.coachOrder = 1;
      }
      this.searchBarTabs.tabs.forEach(x => {
        if (this.search[x.value] !== undefined) {
          params[x.value] = this.search[x.value];
        }
      });
      const errAlertMsg = '查询顾客列表失败';
      getClerkPageBySalonId(params)
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            if (res.data.message) {
              MessageBox.alert(res.data.message);
            } else {
              MessageBox.alert(errAlertMsg);
            }
            return;
          }
          if (res.data.data && res.data.data.records) {
            this.clerkList = res.data.data.records;
            this.total = res.data.data.total;
          }
        })
        .catch(err => {
          console.log('getClerkPageBySalonId', err);
          MessageBox.alert(errAlertMsg);
        })
        .finally(() => {
          this.clerkListLoading = false;
        });
    },
    loadKeepers: async function () {
      await getKeepsBySid(this.salon.salonId)
        .then(res => {
          if (res.data.data) {
            this.listKeeps = res.data.data;
          }
        })
        .catch(err => {
          console.log('getKeepsBySid', err);
        });
    },
    loadTagDefinations: async function () {
      const errAlertMsg = '查询标签失败';
      await actApi
        .getAllBaseTagsNoCount()
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            if (res.data.message) {
              MessageBox.alert(res.data.message);
            } else {
              MessageBox.alert(errAlertMsg);
            }
            return;
          }
          for (const k in res.data.data.gategoryTags) {
            if (!res.data.data.gategoryTags.hasOwnProperty(k)) {
              continue;
            }
            const v = res.data.data.gategoryTags[k];
            if (!v || !v.length) {
              continue;
            }
            for (const tag of v) {
              tag.checked = undefined;
            }
            const key = Number.parseInt(k);
            switch (key) {
              case TagGategory.TAG_101_200_XU_QIU.id:
                this.popXqwj.tagsDef.push(...v);
                break;
              case TagGategory.TAG_101_200_CUR_PIN.id:
                this.popDqpp.tagsDef.push(...v);
                break;
            }
          }
        })
        .catch(err => {
          console.log('loadAllTagDefinations', err);
          MessageBox.alert(errAlertMsg);
        });
    },
    loadTagGroups: async function () {
      const errAlertMsg = '查询标签失败';
      this.tagsGroupList.splice(0, this.tagsGroupList.length);
      await tgpApi
        .getAllGroups()
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            if (res.data.message) {
              MessageBox.alert(res.data.message);
            } else {
              MessageBox.alert(errAlertMsg);
            }
            return;
          }
          const groupTags = res.data.data; // 标签分组信息: List<{groupName:'', tags:['','']}>
          if (groupTags && groupTags.length > 0) {
            let id = -1;
            for (const gp of groupTags) {
              gp.id = id; // 分组标签, 兼容普通标签; 普通标签 id > 0, 分组标签将 id 设置为小于 0
              gp.count = 0;
              gp.isGroup = true; // 分组标签, 兼容普通标签
              gp.checked = false;
              gp.tag = gp.groupName; // 分组标签, 兼容普通标签
              id -= 1;
              this.tagsGroupList.push(gp);
            }
          }
        })
        .catch(err => {
          console.log('getGroupAllTags', err);
          MessageBox.alert(errAlertMsg);
        })
        .finally(() => {
          this.clerkFilter.dataLoading = false;
        });
    },
    onClickTagItem(tag) {
      const idx = this.allSelectedTags.findIndex(x => x.id === tag.id);
      if (tag.checked === true) {
        if (idx === -1) {
          this.allSelectedTags.push(tag);
        }
        return;
      } else {
        if (idx === -1) {
          return;
        }
        this.allSelectedTags.splice(idx, 1);
      }
    },
    onSelectRemove(tag) {
      if (!tag) {
        return;
      }
      const idx = this.allSelectedTags.findIndex(x => x.id === tag.id);
      if (idx !== undefined && idx !== -1) {
        const removeTag = this.allSelectedTags[idx];
        this.allSelectedTags.splice(idx, 1);
        removeTag.checked = false;
      }
    },
    loadClerkTagDqpp: async function (cid) {
      if (this.popDqpp.isFetching) {
        return;
      }
      this.popDqpp.isFetching = true;
      this.popDqpp.cid = undefined;
      this.popDqpp.tagsClerk.splice(0, this.popDqpp.tagsClerk.length);
      const errAlertMsg = '查询顾客升单品类出错';
      await ctgApi
        .getOneGatetory(cid, TagGategory.TAG_101_200_CUR_PIN.id)
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            if (res.data.message) {
              MessageBox.alert(res.data.message);
            } else {
              MessageBox.alert(errAlertMsg);
            }
            return;
          }
          this.popDqpp.cid = cid;
          const ret = res.data.data;
          this.popDqpp.tagsDef.forEach(x => {
            const cpy = Object.assign({}, x);
            let tmp = undefined;
            if (ret && ret.length > 0) {
              tmp = ret.find(y => y.tagName === x.name);
            }
            if (tmp) {
              cpy.checked = true;
            }
            this.popDqpp.tagsClerk.push(cpy);
          });
        })
        .catch(err => {
          console.log('loadClerkTagDqpp', err);
          MessageBox.alert(errAlertMsg);
        })
        .finally(() => {
          this.popDqpp.isFetching = false;
        });
    },
    updateClerkTagDqpp: async function (cid) {
      if (this.popDqpp.isUpdating) {
        return;
      }
      if (this.popDqpp.cid !== cid) {
        MessageBox.alert('只能查看并修改一个顾客的当前品类信息, 请点击空白处关闭所有弹出框后, 重新修改');
        return;
      }
      this.popDqpp.isUpdating = true;
      const xqwj = this.popDqpp.tagsClerk;
      if (!xqwj) {
        return;
      }
      let tagNames = null;
      const xqwjTags = xqwj.filter(x => x.checked).map(x => x.name);
      if (xqwjTags && xqwjTags.length > 0) {
        tagNames = xqwjTags.join(',');
      }
      const errAlertMsg = '更新顾客当前品类出错';
      await ctgApi
        .updateOneGatetory(cid, TagGategory.TAG_101_200_CUR_PIN.id, tagNames)
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            if (res.data.message) {
              MessageBox.alert(res.data.message);
            } else {
              MessageBox.alert(errAlertMsg);
            }
            return;
          }
          this.getClerkList();
          MessageBox.alert('修改成功');
        })
        .catch(err => {
          console.log('updateClerkTagDqpp', err);
          MessageBox.alert(errAlertMsg);
        })
        .finally(() => {
          this.popDqpp.isUpdating = false;
        });
    },
    loadClerkTagXqwj: async function (cid) {
      if (this.popXqwj.isFetching) {
        return;
      }
      this.popXqwj.isFetching = true;
      this.popXqwj.cid = undefined;
      this.popXqwj.tagsClerk.splice(0, this.popXqwj.tagsClerk.length);
      const errAlertMsg = '查询顾客升单品类出错';
      await ctgApi
        .getOneGatetory(cid, TagGategory.TAG_101_200_XU_QIU.id)
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            if (res.data.message) {
              MessageBox.alert(res.data.message);
            } else {
              MessageBox.alert(errAlertMsg);
            }
            return;
          }
          this.popXqwj.cid = cid;
          const ret = res.data.data;
          this.popXqwj.tagsDef.forEach(x => {
            const cpy = Object.assign({}, x);
            let tmp = undefined;
            if (ret && ret.length > 0) {
              tmp = ret.find(y => y.tagName === x.name);
            }
            if (tmp) {
              cpy.checked = true;
            }
            this.popXqwj.tagsClerk.push(cpy);
          });
        })
        .catch(err => {
          console.log('loadClerkTagXqwj', err);
          MessageBox.alert(errAlertMsg);
        })
        .finally(() => {
          this.popXqwj.isFetching = false;
        });
    },
    updateClerkTagXqwj: async function (cid) {
      if (this.popXqwj.isUpdating) {
        return;
      }
      if (this.popXqwj.cid !== cid) {
        MessageBox.alert('只能查看并修改一个顾客的升单品类信息, 请点击空白处关闭所有弹出框后, 重新修改');
        return;
      }
      this.popXqwj.isUpdating = true;
      const xqwj = this.popXqwj.tagsClerk;
      if (!xqwj) {
        return;
      }
      let tagNames = null;
      const xqwjTags = xqwj.filter(x => x.checked).map(x => x.name);
      if (xqwjTags && xqwjTags.length > 0) {
        tagNames = xqwjTags.join(',');
      }
      const errAlertMsg = '更新顾客升单品类出错';
      await ctgApi
        .updateOneGatetory(cid, TagGategory.TAG_101_200_XU_QIU.id, tagNames)
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            if (res.data.message) {
              MessageBox.alert(res.data.message);
            } else {
              MessageBox.alert(errAlertMsg);
            }
            return;
          }
          this.getClerkList();
          MessageBox.alert('修改成功');
        })
        .catch(err => {
          console.log('updateClerkTagXqwj', err);
          MessageBox.alert(errAlertMsg);
        })
        .finally(() => {
          this.popXqwj.isUpdating = false;
        });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleBatchUpdateNoble: async function () {
      if (this.isBatchNobleUpdating) {
        return;
      }
      if (this.multipleSelection.length == 0) {
        MessageBox.alert('请先勾选一些顾客');
        return;
      }
      this.isBatchNobleUpdating = true;
      const noble = this.popover.noble;
      const ids = this.multipleSelection.map(x => x.id);
      const errAlertMsg = '批量修改重点失败';
      await batchUpdateNoble(noble, ids)
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            if (res.data.message) {
              MessageBox.alert(res.data.message);
            } else {
              MessageBox.alert(errAlertMsg);
            }
            return;
          }
          this.getClerkList();
          MessageBox.alert('修改成功');
        })
        .catch(err => {
          console.error(err);
          MessageBox.alert(errAlertMsg);
        })
        .finally(() => {
          this.isBatchNobleUpdating = false;
          this.popover.noble = undefined;
        });
    },
    handleBatchUpdateBirthdayGift: async function () {
      if (this.isBatchNobleUpdating) {
        return;
      }
      if (this.multipleSelection.length == 0) {
        MessageBox.alert('请先勾选一些顾客');
        return;
      }
      this.isBatchNobleUpdating = true;
      const state = this.popover.birthdayGiftYeah;
      const ids = this.multipleSelection.map(x => x.id);
      const errAlertMsg = '批量修改生日送礼状态失败';
      await batchUpdateBirthdayGift(state, ids)
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            if (res.data.message) {
              MessageBox.alert(res.data.message);
            } else {
              MessageBox.alert(errAlertMsg);
            }
            return;
          }
          this.getClerkList();
          MessageBox.alert('修改成功');
        })
        .catch(err => {
          console.error(err);
          MessageBox.alert(errAlertMsg);
        })
        .finally(() => {
          this.isBatchNobleUpdating = false;
          this.popover.birthdayGiftYeah = undefined;
        });
    },
    handleClerkCreate: async function () {
      this.showDialogTags = true;
      this.clerk.sid = this.salon.salonId;
      await this.$nextTick();
      this.$refs.refClerkTags.addOrEditClerk();
    },
    handleClerkUpdate: async function (row) {
      this.showDialogTags = true;
      this.clerk = Object.assign({}, row);
      await this.$nextTick();
      const cpy = Object.assign({}, row);
      this.$refs.refClerkTags.addOrEditClerk(cpy);
    },
    handleClerkTagUpdate: async function (row) {
      this.showDialogTags = true;
      this.clerk = Object.assign({}, row);
      await this.$nextTick();
      const cpy = Object.assign({}, row);
      this.$refs.refClerkTags.editClerkTags(cpy);
    },
    handlePopoverUpdate: async function (row, propName) {
      if (this.popover.isUpdating) {
        MessageBox.alert('正在更新另一个顾客, 请稍后...');
        return;
      }
      if (this.popover[propName] === undefined) {
        return;
      }
      this.popover.isUpdating = true;
      const params = {};
      params.cid = row.id;
      params.tagName = propName;
      params.tagValue = this.popover[propName];
      const errAlertMsg = `更新顾客 ${propName} 失败`;
      await updateClerkTagV1(params)
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            if (res.data.message) {
              MessageBox.alert(res.data.message);
            } else {
              MessageBox.alert(errAlertMsg);
            }
            return;
          }
          const ck = this.clerkList.find(x => x.id === row.id);
          if (ck) {
            ck[propName] = this.popover[propName];
          }
        })
        .catch(err => {
          console.log('handlePopoverUpdate', err);
          MessageBox.alert(errAlertMsg);
        })
        .finally(() => {
          this.popover.isUpdating = false;
        });
    },
    handleShowProposal: async function (row) {
      if (!row.proposal) {
        this.$message.error('该全案没有上传方案');
        return;
      }
      // pdf 或者 txt
      const proposalUrl = `/pub/quanan/proposal?relativePath=${row.proposal}`;
      window.open(proposalUrl, '_blank');
    },
    setNoble: async function (ck) {
      this.$confirm('申请成为重点顾客, 是否允许?', '提示', {
        confirmButtonText: '通过',
        cancelButtonText: '拒绝',
        type: 'warning',
      })
        .then(() => this.doSetNoble(ck, 2))
        .catch(() => this.doSetNoble(ck, 0));
    },
    doSetNoble: async function (ck, noble) {
      const errAlertMsg = '操作失败';
      await applyNobleById(ck.id, noble)
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            if (res.data.message) {
              MessageBox.alert(res.data.message);
            } else {
              MessageBox.alert(errAlertMsg);
            }
            return;
          }
          ck.noble = noble;
          this.$notify({ title: 'Success', message: '已处理', type: 'success', duration: 2000 });
        })
        .catch(err => {
          console.log('applyNobleById', err);
          MessageBox.alert(errAlertMsg);
        });
    },
    doClerkDelete(id, index) {
      this.$confirm('确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          delClerk(id)
            .then(res => {
              if (res.data.status !== apiSts.ResponseOK) {
                if (res.data.message) {
                  MessageBox.alert(res.data.message);
                } else {
                  MessageBox.alert(errAlertMsg);
                }
                return;
              }
              this.$notify({ title: 'Success', message: '删除成功', type: 'success', duration: 2000 });
              this.getClerkList();
            })
            .catch(err => {
              console.log('delClerk', err);
            });
        })
        .catch(() => {});
    },
    doClearSearch() {
      this.search.cname = '';
      this.search.ccode = '';
      this.search.kid = '';
      this.searchBarTabs.tabs.forEach(x => {
        this.search[x.value] = undefined;
      });
      this.listQuery = this.$options.data().listQuery;
      if (this.allSelectedTags.length) {
        this.allSelectedTags.forEach(x => (x.checked = false));
      }
      this.allSelectedTags.splice(0, this.allSelectedTags.length);
      this.getClerkList();
    },
    handleCloseClerkTags: async function (clerkVo) {
      this.showDialogTags = false;
      this.getClerkList();
    },
  },
};
</script>

<style>
.el-tabs--border-card > .el-tabs__content {
  padding: 0;
}
.checkbox-red .el-checkbox__input.is-checked .el-checkbox__inner {
  border-color: red;
  background-color: red;
}
.checkbox-red .el-checkbox__input.is-checked + .el-checkbox__label {
  color: red;
}
.el-drawer.rtl {
  overflow: hidden;
}
</style>

<style lang="scss" scoped>
@import '@/assets/css/scrollbar.scss';
$font-family: 微软雅黑 宋体 思源黑体 Noto Sans SC-Medium;
$title-width: 100px;
$tag-height: 17px;
$tag-line-height: 17px;

::v-deep .clerk_new {
  .el-badge__content {
    font-size: 12px;
    padding: 2px 2px;
    height: 16px;
    line-height: 14px;
    border-radius: 2px 2px;
  }
}

::v-deep .clerk_replay {
  .el-badge__content {
    margin: 0 -10px 10px 8px;
  }
}

::v-deep .el-table td {
  padding: 5px 0;
  min-width: 0;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
}

.filter_page {
  position: relative;
  width: 100%;
  height: auto;
  padding: 5px 10px 0 10px;
  font-family: $font-family;
  background-color: #f8f8fa;
  border-radius: 0px 0px 0px 0px;

  .context {
    width: 100%;
    padding: 5px 10px 0 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 20px;
  }

  .title_1 {
    font-family: $font-family;
    font-size: 0.101rem;
    font-weight: 700;
    letter-spacing: 0px;
    font-variation-settings: 'opsz' auto;
    color: #606266;
    letter-spacing: 1px;
  }

  .title_1_ctx1 {
    width: 100%;
    padding: 0px 0px 0px 0px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;

    .title_1_ctx1_1 {
      display: block;
      text-align: left;

      .act_times {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
      }
    }
  }

  .title_1_ctx1 tr {
    margin-top: 5px;
  }

  .title_1_ctx2 {
    width: 100%;
    padding: 0px 0px 0px 0px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
  }

  .title_2 {
    width: $title-width;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;

    .title_icon {
      width: 4px;
      height: 13px;
      background: #766aff;
      background-position: left bottom;
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }

    .title_name {
      font-family: $font-family;
      font-size: 0.101rem;
      font-weight: 700;
      letter-spacing: 0px;
      font-variation-settings: 'opsz' auto;
      color: #606266;
      letter-spacing: 1px;

      .no_flex {
        display: inline;
        margin-left: 15px;
      }
    }
  }
}

.tag_class {
  width: $title-width;
  font-size: 0.101rem;
  font-weight: 700;
  letter-spacing: 0px;
  font-variation-settings: 'opsz' auto;
  font-feature-settings: 'kern' on;
  color: #606266;
  letter-spacing: 1px;
}

.tag_list {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 5px;
}

.tag_item {
  margin: 0 0 0 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
}

.tag_name {
  width: auto;
  height: $tag-height;
  line-height: $tag-line-height;
  text-align: center;
  font-size: 14px;
  font-weight: normal;
  line-height: 17px;
  letter-spacing: 0px;
  font-variation-settings: 'opsz' auto;
  font-feature-settings: 'kern' on;
  color: #666666;
}

.tag_selected {
  background: #f5f5f5;
  padding: 3px 3px 3px 3px;
}

.tag_personality {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 5px;
  margin-bottom: 10px;
}
</style>
